<template>
  <div class="charts-container">
    <div ref="lineChart" class="chart-item"></div>
    <div ref="barChart" class="chart-item"></div>
    <div ref="pieChart" class="chart-item"></div>
    <div ref="radarChart" class="chart-item"></div>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const lineChart = ref(null);
    const barChart = ref(null);
    const pieChart = ref(null);
    const radarChart = ref(null);
    let lineInstance, barInstance, pieInstance, radarInstance;

    const initCharts = () => {
      // 折线图 - 鲜花销售趋势
      lineInstance = echarts.init(lineChart.value);
      lineInstance.setOption({
        title: { text: '月度鲜花销售趋势', left: 'center', textStyle: { color: '#2e8b57' } },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],
          axisLabel: { color: '#228b22' }
        },
        yAxis: { 
          type: 'value',
          axisLabel: { color: '#3cb371' }
        },
        series: [{
          data: [120, 350, 280, 180, 220, 190], // 情人节、母亲节月份数据提升
          type: 'line',
          smooth: true,
          color: '#d4388c',
          areaStyle: { color: 'rgba(216,56,140,0.2)' },
          symbol: 'circle',
          symbolSize: 10
        }]
      });

      // 柱状图 - 鲜花库存量
      barInstance = echarts.init(barChart.value);
      barInstance.setOption({
        title: { text: '鲜花库存量', left: 'center', textStyle: { color: '#2e8b57' } },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['玫瑰', '百合', '康乃馨', '郁金香', '向日葵'],
          axisLabel: { color: '#228b22', rotate: 30 }
        },
        yAxis: { 
          type: 'value',
          axisLabel: { color: '#3cb371' }
        },
        series: [{
          data: [356, 234, 189, 278, 155], // 玫瑰库存量最高
          type: 'bar',
          barWidth: '60%',
          color: '#90ee90',
          itemStyle: { borderRadius: [5, 5, 0, 0] }
        }]
      });

      // 饼图 - 鲜花品类占比
      pieInstance = echarts.init(pieChart.value);
      pieInstance.setOption({
        title: { text: '鲜花品类占比', left: 'center', textStyle: { color: '#2e8b57' } },
        tooltip: { 
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} (占比{d}%)' 
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          label: { color: '#006400' },
          data: [
            { value: 356, name: '玫瑰系列', itemStyle: { color: '#ff69b4' } },
            { value: 234, name: '百合系列', itemStyle: { color: '#f8c3cd' } },
            { value: 189, name: '康乃馨', itemStyle: { color: '#ffb6c1' } },
            { value: 278, name: '郁金香', itemStyle: { color: '#da70d6' } },
            { value: 155, name: '向日葵', itemStyle: { color: '#ffd700' } }
          ],
          emphasis: { 
            itemStyle: { 
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            } 
          }
        }]
      });

      // 雷达图 - 鲜花商品分析
      radarInstance = echarts.init(radarChart.value);
      radarInstance.setOption({
        title: { text: '鲜花商品分析', left: 'center', textStyle: { color: '#2e8b57' } },
        radar: {
          indicator: [
            { name: '香气浓度', max: 100 },
            { name: '销量', max: 400 },
            { name: '保鲜时长', max: 120 },
            { name: '客户评分', max: 100 },
            { name: '配送效率', max: 100 }
          ],
          axisLine: { lineStyle: { color: '#3cb371' } }
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [88, 356, 65, 94, 85],
              name: '红玫瑰',
              color: '#ff1493',
              areaStyle: { color: 'rgba(255,20,147,0.3)' }
            },
            {
              value: [92, 278, 82, 89, 78],
              name: '香水百合',
              color: '#9370db',
              areaStyle: { color: 'rgba(147,112,219,0.3)' }
            }
          ],
          symbol: 'circle',
          symbolSize: 8
        }]
      });
    };

    const handleResize = () => {
      [lineInstance, barInstance, pieInstance, radarInstance].forEach(
        chart => chart && chart.resize()
      );
    };

    onMounted(() => {
      initCharts();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
      [lineInstance, barInstance, pieInstance, radarInstance].forEach(
        chart => chart && chart.dispose()
      );
    });

    return { lineChart, barChart, pieChart, radarChart };
  }
}
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 1400px;
  height: 800px;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #f8fff8 0%, #f0fff0 100%);
}

.chart-item {
  width: 60%;
  height: 60%;
  min-width: 500px;
  min-height: 300px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(46,139,87,0.15);
  border-radius: 12px;
  margin: 10px;
  background: rgba(255,255,255,0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(144,238,144,0.3);
}

.chart-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 30px rgba(46,139,87,0.25);
}
</style>